<template>
  <div class="login-wrap">
    <div class="login-card">
      <h4>管理后台</h4>
      <section>
        <a-input
          v-model:value="account"
          placeholder="用户名"
          style="margin-bottom: 20px;"
        />
        <a-input
          v-model:value="pwd"
          placeholder="密码"
          style="margin-bottom: 20px;"
        />
        <a-button
          type="primary"
          @click="login"
        >
          登录
        </a-button>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const account = ref('')
const pwd = ref('')
const ctx: any = inject('$message') // message 挂载

const login = () => {
  console.log(account.value)
  console.log(pwd.value)
  if (account.value === 'admin' && pwd.value === 'asdf1234') {
    sessionStorage.setItem('userName', account.value)
    router.push('/index')
  } else {
    ctx.error('账号密码不正确')
  }
}
</script>
<style>
.login-wrap {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-card {
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .08);
    padding: 20px 40px;
    width: 400px;
}
.login-card h4 {
    font-size: 16px;
    margin-bottom: 24px;
}

</style>
